<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Qrcode component for Vue.js.">
  <meta name="author" content="Chen Fengyuan">
  <title>vue-qrcode</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/highlightjs@9.10.0/styles/github.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <header class="navbar navbar-light navbar-expand-md">
    <nav class="container">
      <a class="navbar-brand" href="./">vue-qrcode</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbar-collapse" role="navigation">
        <nav class="nav navbar-nav">
          <a class="nav-link" href="https://github.com/xkeshi/vue-qrcode/blob/master/README.md" title="View the documentation">Docs</a>
          <a class="nav-link" href="https://github.com/xkeshi/vue-qrcode/blob/master/LICENSE">License</a>
          <a class="nav-link" href="https://github.com/xkeshi/vue-qrcode" title="View the GitHub project">GitHub</a>
          <a class="nav-link" href="https://github.com/xkeshi" title="About the team">About</a>
        </nav>
      </div>
    </nav>
  </header>

  <div class="jumbotron bg-primary text-white rounded-0">
    <div class="container">
      <h1>vue-qrcode <small class="h6">v1.0.0</small></h1>
      <p class="lead">Qrcode component for Vue.js.</p>
    </div>
  </div>

  <div class="container">
    <h3>Examples</h3>
    <hr>
    <div id="app">
      <qrcode value="https://xkeshi.github.io/vue-qrcode/"></qrcode>
      <qrcode value="https://xkeshi.github.io/vue-qrcode/" :options="{ foreground: '#0275d8' }"></qrcode>
      <qrcode value="https://xkeshi.github.io/vue-qrcode/" tag="img"></qrcode>
    </div>
    <br>

    <h6>HTML:</h6>
    <pre><code class="language-html">&lt;div id=&quot;app&quot;&gt;
  &lt;qrcode value=&quot;https://xkeshi.github.io/vue-qrcode/&quot;&gt;&lt;/qrcode&gt;
  &lt;qrcode value=&quot;https://xkeshi.github.io/vue-qrcode/&quot; :options=&quot;{ foreground: &#039;#0275d8&#039; }&quot;&gt;&lt;/qrcode&gt;
  &lt;qrcode value=&quot;https://xkeshi.github.io/vue-qrcode/&quot; tag=&quot;img&quot;&gt;&lt;/qrcode&gt;
&lt;/div&gt;</code></pre>

    <h6>JavaScript:</h6>
    <pre><code class="language-js">window.addEventListener('DOMContentLoaded', function () {
  var Vue = window.Vue;
  var VueQrcode = window.VueQrcode;

  Vue.component('qrcode', VueQrcode);

  new Vue({
    el: '#app',
  });
});</code></pre>
  </div>

  <footer></footer>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
  <script src="https://unpkg.com/highlightjs@9.10.0/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <script src="js/vue-qrcode.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
